<!DOCTYPE html>

<head>
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
    }

    #list li {
      margin-right: 20px;
      list-style: none;
      float: left;
    }

    #popup {
      height: 200px;
      width: 200px;
      margin-top: -200px;
      color: #fff;
      background: #253444b8;
    }

    #popup-closer {
      color: #fff;
    }
  </style>
  <title>一个最简单的例子</title>
  <link rel="stylesheet" href="../library/ol/ol.css">
  <link rel="stylesheet" href="../css/common.css">

  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>

</head>

<body>
  <button id="start-animation">Start Animation</button>
  <button id="clear">clear</button>
  <button id="add">add</button>
  <button id="comeTo">come to</button>
  <input id="searchInput" type="text" placeholder="请输入搜索名" value="mark2">
  <button id="searchBtn">search</button>
  <ul id="list">
    <li class="mark1">mark1</li>
    <li class="mark2">mark2</li>
    <li class="mark3">mark3</li>
    <li class="mark4">mark4</li>
  </ul>

  <div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer" onclick="()=>{$()}"> 关闭 </a>
    <div id="popup-content"></div>
  </div>
  <div id="map" class="map"> </div>


  <script src="../library/ol/ol-debug.js"></script>
  <script src="js/animation.js"></script>
  <script src="./js/common.js"></script>
  <script type="text/javascript">
    var vectorLayer = null;
    var vectorLayer2 = null;
    var vectorLayer3 = null;
    var gaodeMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
      })
    });
    // 地图初始化
    var container = document.getElementById("popup");
    var content = document.getElementById("popup-content");
    var popupCloser = document.getElementById("popup-closer");
    var overlay = new ol.Overlay({
      //设置弹出框的容器
      element: container,
      //是否自动平移，即假如标记在屏幕边缘，弹出时自动平移地图使弹出框完全可见
      autoPan: true
    });
    //创建图标样式
    var styles = {
      Point: new ol.style.Style({
        image: new ol.style.Icon({
          opacity: 0.75,
          src: "imgs/location.png",
        }),
      }),
      // 创建线样式
      LineString: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#000',
          width: 18
        })
      }),
      Polygon: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'red',
          // lineDash: [4],
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 255, 255, 0.1)'
        })
      })
    }

    var styleFunction = function (feature) {
      var style = styles[feature.getGeometry().getType()];
      var b = feature.getGeometry().getType()
      // debugger
      // return styles[feature.getGeometry().getType()];
      return style;
    };
    //创建矢量层
    var vectorSource = new ol.source.Vector({});
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction,
    });
    var vectorLayer2 = new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction,
    });
    var vectorLayer3 = new ol.layer.Vector({
      source: vectorSource,
      style: styleFunction,
      // style: styles.LineString
    });

    var extent = [0, 0, 0, 0]
    var map = new ol.Map({
      layers: [ gaodeMapLayer],
      target: 'map',
      view: new ol.View({
        center: ol.proj.transform(
          [104, 30], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6,
        minZoom: 4,
      })
    });
    var view = map.getView();

    addLayer()

    function addLayer() {
      console.log(overlay)
      // 开始
      $.ajaxSettings.async = true; //同步
      $.getJSON("./json/points.json", function (points) {
        var featureArr = []
        // 获取弹出框
        $.each(points.points, function (i, val) {
          var coord = [val.longitude, val.latitude]
          console.log(coord)
          var icon = new ol.Feature({
            type: "Point",
            geometry: new ol.geom.Point(coord),
            name: val.name,
            where: val.where
          });
          icon.setId(val.name)
          featureArr.push(icon)
        })
        //添加进map层
        map.addLayer(vectorLayer);
        vectorSource.addFeatures(featureArr);
        // console.log(vectorLayer)
      })

      $.getJSON("./json/polygons.json", function (points) {
        // 获取弹出框
        var featureArr = [];
        $.each(points.polygons, function (i, val) {
          var coords = val.points;
          console.log(val, coords)
          var Polygon = new ol.Feature({
            type: "Polygon",
            geometry: new ol.geom.Polygon(coords),
            name: val.name,
            where: val.where
          });
          // id不能重复 
          Polygon.setId('polygon' + val.name)
          featureArr.push(Polygon)
        })

        map.addLayer(vectorLayer2);
        console.log(vectorLayer2);
        debugger;
        vectorSource.addFeatures(featureArr);
      })

      $.getJSON("./json/lines.json", function (points) {
        // 获取弹出框
        var featureArr = [];
        $.each(points.polygons, function (i, val) {
          var coords = val.points[0];
          console.log(val, coords)
          var Polygon = new ol.Feature({
            type: "LineString",
            geometry: new ol.geom.LineString(coords),
            name: val.name,
            where: val.where
          });
          // id不能重复 
          Polygon.setId('line' + val.name)
          featureArr.push(Polygon)
        })

        // map.addLayer(vectorLayer3);
        console.log(vectorLayer3);
        vectorSource.addFeatures(featureArr);
      })
    }
  </script>
</body>